import React, { useState, useRef } from 'react';
import { Button, Tooltip } from 'antd';
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
import { useTheme } from '../hooks/useTheme';
import './ThemeToggle.css';

const ThemeToggle: React.FC = () => {
  const { isLight, toggle } = useTheme();
  const [isTransitioning, setIsTransitioning] = useState(false);
  const buttonRef = useRef<HTMLButtonElement>(null);

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    // 防止重复点击
    if (isTransitioning) return;
    
    setIsTransitioning(true);
    
    // 创建涟漪效果
    const button = e.currentTarget;
    const rect = button.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = e.clientX - rect.left - size / 2;
    const y = e.clientY - rect.top - size / 2;
    
    const ripple = document.createElement('span');
    ripple.style.width = ripple.style.height = size + 'px';
    ripple.style.left = x + 'px';
    ripple.style.top = y + 'px';
    ripple.className = 'ripple-effect';
    
    button.appendChild(ripple);
    
    // 执行主题切换
    toggle();
    
    // 清理涟漪元素
    setTimeout(() => {
      if (ripple.parentNode) {
        ripple.parentNode.removeChild(ripple);
      }
    }, 600);
    
    // 重置状态
    setTimeout(() => {
      setIsTransitioning(false);
    }, 600);
  };

  return (
    <Tooltip title={`切换到${isLight ? '深色' : '浅色'}主题`}>
      <Button
        ref={buttonRef}
        type="text"
        icon={isLight ? <MoonOutlined /> : <SunOutlined />}
        onClick={handleClick}
        className={`theme-toggle-btn ${isTransitioning ? 'theme-transitioning' : ''}`}
        size="large"
        disabled={isTransitioning}
      />
    </Tooltip>
  );
};

export default ThemeToggle; 